<template>
  <!-- 个人中心 -->
  <div class="personal_styl">
    <div class="personal_content">
      <div class="personal_menu">
        <div class="menu_top">
          <Icons
            font="#icon-a-01gn"
            class="icon-a-01gn"
            fontSize="15px"
          ></Icons>
          <div class="top_name">功能菜单</div>
        </div>
        <div
          class="menu_item"
          @click="toPageFun(item,index)"
          v-for="(item, index) in menuList"
          :key="index"
        >
          <Icons
            :font="$route.path.includes(item.path) ? '#'+item.iconCopy : '#'+item.icon"
            fontSize="16px"
          ></Icons>
          <div
            class="item_name"
            :class="[$route.path.includes(item.path) ? 'item_namecopy' : '']"
          >{{ item.name }}</div>
        </div>
      </div>
      <div class="personal_right">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import QdNotice from "@/components/common/Qd-Notice.vue";

export default {
  components: { QdNotice },
  data() {
    return {
      menuList: [
        {
          id: '0',
          name: '个人信息',
          path: 'user',
          icon: 'icon-grxx2',
          iconCopy: 'icon-grxx',
        },
        {
          id: '1',
          name: '车辆信息',
          path: 'car',
          icon: 'icon-wdcl',
          iconCopy: 'icon-wdcl2',
        },
        {
          id: '2',
          name: '我的合同',
          path: 'contract',
          icon: 'icon-gddd',
          iconCopy: 'icon-gddd2',
        },
        {
          id: '3',
          name: '我的订单',
          path: 'orderList',
          icon: 'icon-gddd',
          iconCopy: 'icon-gddd2',
        },
        {
          id: '3',
          name: '我的提货单',
          path: 'billOrder',
          icon: 'icon-wdthd',
          iconCopy: 'icon-wdthd2',
        },
        {
          id: '4',
          name: '我的资金',
          path: 'price',
          icon: 'icon-wdzj',
          iconCopy: 'icon-wdzj2',
        },
        {
          id: '5',
          name: '安全设置',
          path: 'safeSet',
          icon: 'icon-aqsz',
          iconCopy: 'icon-sj2',
        },
      ],
    };
  },
  mounted() { },
  methods: {
    toPageFun(item, index) {
      this.chooseIndex = index;
      this.$router.push(item.path);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.personal_styl {
  width: 100%;
  padding-bottom: 150px;
  background-color: #f3f3f3;
  .personal_content {
    .flex-x();
    align-items: flex-start;
    width: 1185px;
    margin: 14px auto;
    .personal_menu {
      position: sticky;
      top: 110px;
      width: 192px;
      height: 606px;
      color: #333333;
      background-color: #ffffff;
      .menu_top {
        .flex-x(center);
        width: 100%;
        height: 48px;
        margin-bottom: 8px;
        background-color: #f4fbff;
        .icon-a-01gn {
          margin-right: 4px;
        }
      }
      .menu_item {
        .flex-x(flex-start);
        width: 100%;
        height: 48px;
        padding-left: 58px;
        cursor: pointer;
        .item_name {
          margin-left: 6px;
        }
        .item_namecopy {
          color: @themeColor;
        }
      }
    }
    .personal_right {
      width: 983px;
    }
  }
}
</style>
